<template>
  <div style="background:white;height:100%;padding:20px">
    <div style="display:flex;flex-direction:row;">
      <a-button type="primary" @click="add">添加</a-button>
      <a-button type="primary" style="margin-left:10px" @click="sxEvent">刷新</a-button>
      <a-button type="primary" style="margin-left:10px" @click="deteleListEvent">批量删除</a-button>
    </div>

    <a-table :pagination="false" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="cgmxTable" size="small" rowKey="key" :columns="columns" :dataSource="userData" :loading="loading" style="margin-top:10px">

    </a-table>

    <a-modal title="添加订单状态" :visible="orderVisible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
      <br><br>
      <div style="text-align:center">
        订单名称：
        <a-input placeholder="请输入订单名称" v-model="info.statusName" style="margin:0px;width:170px" />
        <br><br>
        订单说明：
        <a-input placeholder="请输入订单说明" v-model="info.statusDes" style="margin:0px;width:170px" />
        <br><br>
        订单颜色：
        <a-input placeholder="请输入订单颜色" v-model="info.statusColor" style="margin:0px;width:170px" />
        <br><br>
        订单编码：
        <a-input placeholder="请输入订单编码：" v-model="info.statusCode" style="margin:0px;width:170px" />
        <br><br>
        发送短信：
        <a-input placeholder="请输入发送短信" v-model="info.sendSms" style="margin:0px;width:170px" />
        <br><br>
        订单状态：
        <a-input type='number' placeholder="请输入订单状态" v-model="info.sendStatus" style="margin:0px;width:170px" />
        <div style="height:40px"></div>
      </div>
    </a-modal>

  </div>
</template>

<script>
import moment from 'moment'
import { STable } from '@/components'
import { getRoleList, getServiceList } from '@/api/manage'
import { orderStatus, deleteOrderStatus, getList } from '@/api/loanApi'

export default {
  name: 'TableList',
  components: {
    STable,
  },
  inject: ['reload'],
  data() {
    return {
      info: {},
      confirmLoading: false,
      orderVisible: false,
      loading: false,
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 表头
      userData: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'id',
          align: 'center',
        },
        {
          title: '订单状态',
          dataIndex: 'sendStatus',
          align: 'center',
        },
        {
          title: '订单说明',
          dataIndex: 'statusDes',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: [{ no: '1' }],
      selectedRowKeys: [],
      selectedRows: [],
      pagination: {
        total: 0,
        showTotal: (total) => `共有 ${total} 条数据`,
      },
      current: 1,
      pageSize: 15,
      deteleList: [],
    }
  },
  created() {},
  mounted() {
    this.orderStatusFunction()
  },
  methods: {
    handleOk() {
      this.confirmLoading = true
      
      getList(this.info)
        .then((response) => {
          if (response.code == 200) {
            let type = 'success'
            this.$notification[type]({
              message: '温馨提示',
              description: '新增成功',
              duration: 3,
            })
            this.orderVisible = false
            this.confirmLoading = false
          } else {
            let type = 'error'
            this.$notification[type]({
              message: '温馨提示',
              description: '新增失败',
              duration: 3,
            })
            this.orderVisible = false
            this.confirmLoading = false
          }
          // this.userData = response.data
        })
        .catch((error) => {
          this.confirmLoading = false
        })
    },
    add() {
      this.info = {}
      this.orderVisible = true
    },
    handleCancel() {
      this.orderVisible = false
    },
    orderStatusFunction() {
      this.loading = true
      orderStatus()
        .then((response) => {
          this.userData = response.data
          this.loading = false
        })
        .catch((error) => {
          this.loading = false
        })
    },
    //筛选
    onSelectChange(selectedRowKeys, selectedRows) {
      let arr = this.userData
      this.selectedRowKeys = selectedRowKeys
      let rowsArr = selectedRows
      console.log('sss', selectedRows)
      this.deteleList = []
      for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < rowsArr.length; j++) {
          if (arr[i].id == rowsArr[j].id) {
            this.deteleList.push(arr[i].id)
          }
        }
      }
    },
    tableOption() {
      if (!this.optionAlertShow) {
        this.options = {
          alert: {
            show: true,
            clear: () => {
              this.selectedRowKeys = []
            },
          },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange,
          },
        }
        this.optionAlertShow = true
      } else {
        this.options = {
          alert: false,
          rowSelection: null,
        }
        this.optionAlertShow = false
      }
    },

    handleEdit(record) {
      this.$emit('onEdit', record)
    },
    //刷新
    sxEvent() {
      this.reload()
    },
    //批量删除
    deteleListEvent() {
      let arr = this.deteleList.join(',')
      let clickNum = 0
      this.$confirm({
        title: '提示',
        content: '确认要删除吗?',
        onOk: () => {
          if (clickNum == 0) {
            clickNum = 1
            deleteOrderStatus(arr)
              .then((response) => {
                if (response.code == 200) {
                  let type = 'success'
                  this.$notification[type]({
                    message: '温馨提示',
                    description: '删除成功',
                    duration: 3,
                  })

                  this.reload()
                } else {
                  let type = 'error'
                  this.$notification[type]({
                    message: '温馨提示',
                    description: '操作失败',
                    duration: 3,
                  })

                  this.reload()
                }
              })
              .catch((error) => {})
          } else {
            let type = 'error'
            this.$notification[type]({
              message: '温馨提示',
              description: '请不要频繁点击',
              duration: 3,
            })
          }
        },
        onCancel() {},
      })
    },

    toggleAdvanced() {
      this.advanced = !this.advanced
    },

    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date()),
      }
    },
  },
}
</script>
<style lang="less">
.laytop {
  display: flex;
  flex-direction: row;
}
</style>
